CSS View Transitions'i meisterlik valdamine: süvauuring pseudo-elementide stiilimisse

Pidevalt areneval veebiarenduse maastikul on sujuva, voolava ja kaasahaarava kasutajakogemuse poole püüdlemine pidev protsess. Aastaid on arendajad püüdnud ületada lõhet veebi ja natiivrakenduste vahel, eriti mis puudutab leheüleminekute sujuvust. Traditsiooniline veebinavigatsioon toob sageli kaasa järsu, terve lehe uuesti laadimise – tühja valge ekraani, mis hetkeks katkestab kasutaja süvenemise. Üheleheküljelised rakendused (SPA-d) on seda leevendanud, kuid kohandatud, tähendusrikaste üleminekute loomine on jäänud keeruliseks ja sageli hapraks ülesandeks, mis sõltub suuresti JavaScripti teekidest ja keerukast olekuhaldusest.

Siin tuleb mängu CSS View Transitions API, murranguline tehnoloogia, mis on valmis revolutsioneerima viisi, kuidas me veebis kasutajaliidese muudatusi käsitleme. See võimas API pakub lihtsat, kuid uskumatult paindlikku mehhanismi erinevate DOM-i olekute vahel animeerimiseks, muutes poleeritud, rakenduselaadsete kogemuste loomise lihtsamaks kui kunagi varem, mida kasutajad on hakanud ootama. Selle API võimsuse keskmes on komplekt uusi CSS-i pseudo-elemente. Need ei ole teie tüüpilised selektorid; need on dünaamilised, ajutised elemendid, mille brauser genereerib, et anda teile detailne kontroll ülemineku iga faasi üle. See juhend viib teid sügavale selle pseudo-elementide puu sisse, uurides, kuidas iga komponenti stiliseerida, et luua vapustavaid, jõudsaid ja ligipääsetavaid animatsioone globaalsele publikule.

Vaateülemineku anatoomia

Enne kui saame üleminekut stiliseerida, peame mõistma, mis toimub kapoti all, kui see käivitatakse. Kui algatate vaateülemineku (näiteks kutsudes välja document.startViewTransition()), teeb brauser läbi rea samme:

• Vana oleku jäädvustamine: Brauser teeb "ekraanipildi" lehe hetkeolekust.
• DOM-i uuendamine: Teie kood teeb seejärel DOM-is oma muudatused (nt navigeerib uude vaatesse, lisab või eemaldab elemente).
• Uue oleku jäädvustamine: Kui DOM-i uuendus on lõpule viidud, teeb brauser uuest olekust ekraanipildi.
• Pseudo-elementide puu ehitamine: Seejärel konstrueerib brauser lehe kattekihis ajutise pseudo-elementide puu. See puu sisaldab vana ja uue oleku jäädvustatud pilte.
• Animeerimine: Nendele pseudo-elementidele rakendatakse CSS-animatsioone, luues sujuva ülemineku vanast olekust uude. Vaikimisi on selleks lihtne rist-hajumine (cross-fade).
• Puhastamine: Kui animatsioonid on lõppenud, eemaldatakse pseudo-elementide puu ja kasutaja saab suhelda uue, elava DOM-iga.

Kohandamise võti on see ajutine pseudo-elementide puu. Mõelge sellest kui kihtide komplektist disainitööriistas, mis on ajutiselt teie lehe peale paigutatud. Teil on nende kihtide üle täielik CSS-kontroll. Siin on struktuur, millega te töötate:

• ::view-transition
  • ::view-transition-group(*)
    • ::view-transition-image-pair(*)
      • ::view-transition-old(*)
      • ::view-transition-new(*)

Vaatame lähemalt, mida igaüks neist pseudo-elementidest esindab.

Pseudo-elementide osatäitjad

::view-transition: See on kogu struktuuri juur. See on üksainus element, mis täidab vaateakna ja asub kogu muu lehe sisu peal. See toimib konteinerina kõigile üleminekurühmadele ja on suurepärane koht ülemineku üldiste omaduste, näiteks kestuse või ajastusfunktsiooni, määramiseks.

::view-transition-group(*): Iga eraldiseisva ülemineva elemendi jaoks (tuvastatud CSS-i omadusega view-transition-name) luuakse rühm. See pseudo-element vastutab oma sisu positsiooni ja suuruse animeerimise eest. Kui teil on kaart, mis liigub ekraani ühelt küljelt teisele, on see tegelikult ::view-transition-group, mis liigub.

::view-transition-image-pair(*): Rühma sees asuv element toimib vana ja uue vaate konteineri ja lõikemaskina. Selle peamine roll on säilitada animatsiooni ajal efekte nagu border-radius või transform ning käsitleda vaikimisi rist-hajumise animatsiooni.

::view-transition-old(*): See esindab elemendi "ekraanipilti" või renderdatud vaadet selle vanas olekus (enne DOM-i muutust). Vaikimisi animeerub see opacity: 1 väärtusest opacity: 0 väärtuseni.

::view-transition-new(*): See esindab elemendi "ekraanipilti" või renderdatud vaadet selle uues olekus (pärast DOM-i muutust). Vaikimisi animeerub see opacity: 0 väärtusest opacity: 1 väärtuseni.

Juur: ::view-transition pseudo-elemendi stiliseerimine

::view-transition pseudo-element on lõuend, millele kogu teie animatsioon maalitakse. Ülemise taseme konteinerina on see ideaalne koht omaduste määratlemiseks, mis peaksid kehtima üleminekule globaalselt. Vaikimisi pakub brauser komplekti animatsioone, kuid saate neid hõlpsalt üle kirjutada.

Näiteks, vaikimisi üleminek on rist-hajumine, mis kestab 250 millisekundit. Kui soovite seda muuta iga ülemineku jaoks oma saidil, saate sihtida juur-pseudo-elementi:

::view-transition {

  animation-duration: 500ms;

  animation-timing-function: ease-in-out;

}

See lihtne reegel muudab nüüd kõik vaikimisi lehe hajumised kaks korda pikemaks ja kasutab 'ease-in-out' kõverat, andes neile veidi teistsuguse tunde. Kuigi siin saab rakendada keerulisi animatsioone, on seda üldiselt kõige parem kasutada universaalse ajastuse ja sujuvuse määratlemiseks, lastes spetsiifilisematel pseudo-elementidel tegeleda detailse koreograafiaga.

Grupeerimine ja nimetamine: `view-transition-name`'i jõud

Ilma lisatööd tegemata pakub View Transition API vaikimisi kogu lehe jaoks rist-hajumist. Selle eest hoolitseb üksainus juure pseudo-elementide rühm. API tõeline jõud avaneb siis, kui soovite animeerida konkreetseid, üksikuid elemente olekute vahel. Näiteks toote pisipildi sujuv kasvamine ja liikumine nimekirjalehelt toote põhipildi positsioonile detaililehel.

Et öelda brauserile, et kaks elementi erinevates DOM-i olekutes on kontseptuaalselt samad, kasutate CSS-i omadust view-transition-name. See omadus tuleb rakendada nii algus- kui ka lõpuelemendile.

/* Nimekirjalehe CSS-is */

.product-thumbnail {

  view-transition-name: product-image;

}

/* Detaililehe CSS-is */

.main-product-image {

  view-transition-name: product-image;

}

Andes mõlemale elemendile sama unikaalse nime ('product-image' antud juhul), annate brauserile korralduse: "Selle asemel, et lihtsalt vana leht välja ja uus sisse hajutada, loo selle konkreetse elemendi jaoks eraldi üleminek." Brauser genereerib nüüd spetsiaalse ::view-transition-group(product-image), et käsitleda selle animatsiooni eraldi juur-hajumisest. See on põhimõtteline kontseptsioon, mis võimaldab populaarset "muunduvat" ehk "jagatud elemendi" ülemineku efekti.

Oluline märkus: Igal antud hetkel ülemineku ajal peab view-transition-name olema unikaalne. Teil ei saa olla kahte nähtavat elementi sama nimega samal ajal.

Põhjalik stiliseerimine: tuum-pseudo-elemendid

Kui meie elemendid on nimetatud, saame nüüd süveneda spetsiifiliste pseudo-elementide stiliseerimisse, mida brauser nende jaoks genereerib. Siin saate luua tõeliselt kohandatud ja väljendusrikkaid animatsioone.

`::view-transition-group(name)`: liikur

Rühma ainus ülesanne on üle minna vana elemendi suuruselt ja positsioonilt uue elemendi suurusele ja positsioonile. See ei sisalda tegeliku sisu välimust, vaid ainult selle piirjoonkasti. Mõelge sellest kui liikuvast raamist.

Vaikimisi animeerib brauser selle transform ja width/height omadusi. Saate seda üle kirjutada, et luua erinevaid efekte. Näiteks võite lisada selle liikumisele kaare, animeerides seda mööda kõverat rada, või panna selle oma teekonnal üles-alla skaleeruma.

::view-transition-group(product-image) {

  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

}

Selles näites rakendame spetsiifilist sujuvusfunktsiooni ainult toote pildi liikumisele, muutes selle dünaamilisemaks ja füüsilisemaks, ilma et see mõjutaks ülejäänud lehe vaikimisi hajumist.

`::view-transition-image-pair(name)`: lõikaja ja hajutaja

Liikuva rühma sees hoiab pildipaar vana ja uut vaadet. See toimib lõikemaskina, nii et kui teie elemendil on border-radius, tagab pildipaar, et sisu jääb selle raadiusega lõigatuks kogu suuruse ja positsiooni animatsiooni vältel. Selle teine peamine ülesanne on korraldada vaikimisi rist-hajumine vana ja uue sisu vahel.

Võiksite seda elementi stiliseerida, et tagada visuaalne järjepidevus või luua arenenumaid efekte. Oluline omadus, mida kaaluda, on isolation: isolate. See on ülioluline, kui kavatsete kasutada lastelementidel (vanal ja uuel) arenenud mix-blend-mode efekte, kuna see loob uue ladumiskonteksti ja takistab segunemisel mõjutamast elemente väljaspool üleminekurühma.

::view-transition-image-pair(product-image) {

  isolation: isolate;

}

`::view-transition-old(name)` ja `::view-transition-new(name)`: etenduse tähed

Need on pseudo-elemendid, mis esindavad teie elemendi visuaalset välimust enne ja pärast DOM-i muutust. Siin toimub enamik teie kohandatud animatsioonitööst. Vaikimisi käivitab brauser neil lihtsa rist-hajumise animatsiooni, kasutades opacity ja mix-blend-mode. Kohandatud animatsiooni loomiseks peate esmalt vaikeanimatsiooni välja lülitama.

::view-transition-old(name),

::view-transition-new(name) {

  animation: none;

}

Kui vaikeanimatsioon on keelatud, olete vaba rakendama omaenda animatsiooni. Uurime mõnda levinud mustrit.

Kohandatud animatsioon: liuglemine

Rist-hajumise asemel paneme konteineri sisu sisse liuglema. Näiteks artiklite vahel navigeerides tahame, et uue artikli tekst liugleks sisse paremalt, samal ajal kui vana tekst liugleb välja vasakule.

Esiteks, defineerige võtmekaadrid:

@keyframes slide-from-right {

  from { transform: translateX(100%); }

  to { transform: translateX(0); }

}

@keyframes slide-to-left {

  from { transform: translateX(0); }

  to { transform: translateX(-100%); }

}

Nüüd rakendage need animatsioonid vana ja uue pseudo-elemendi jaoks nimetatud elemendile 'article-content'.

::view-transition-old(article-content) {

  animation: 300ms ease-out forwards slide-to-left;

}

::view-transition-new(article-content) {

  animation: 300ms ease-out forwards slide-from-right;

}

Kohandatud animatsioon: 3D pööre

Dramaatilisema efekti saavutamiseks saate luua 3D-kaardi pöörde. See nõuab transform omaduse animeerimist rotateY abil ja ka backface-visibility haldamist.

/* Rühm vajab 3D-konteksti */

::view-transition-group(card-flipper) {

  transform-style: preserve-3d;

}

/* Ka pildipaar peab säilitama 3D-konteksti */

::view-transition-image-pair(card-flipper) {

  transform-style: preserve-3d;

}

/* Vana vaade pöörleb 0 kuni -180 kraadi */

::view-transition-old(card-flipper) {

  animation: 600ms ease-in forwards flip-out;

  backface-visibility: hidden;

}

/* Uus vaade pöörleb 180 kuni 0 kraadi */

::view-transition-new(card-flipper) {

  animation: 600ms ease-out forwards flip-in;

  backface-visibility: hidden;

}

@keyframes flip-out {

  from { transform: rotateY(0deg); }

  to { transform: rotateY(-180deg); }

}

@keyframes flip-in {

  from { transform: rotateY(180deg); }

  to { transform: rotateY(0deg); }

}

Praktilised näited ja edasijõudnud tehnikad

Teooria on kasulik, kuid praktiline rakendus on see, kus me tõeliselt õpime. Vaatame läbi mõned levinud stsenaariumid ja kuidas neid vaateülemineku pseudo-elementidega lahendada.

Näide: "muunduv" kaardi pisipilt

See on klassikaline jagatud elemendi üleminek. Kujutage ette kasutajaprofiilide galeriid. Iga profiil on kaart avatariga. Kui klõpsate kaardil, navigeerite detaililehele, kus sama avatar kuvatakse silmapaistvalt ülaosas.

1. samm: määrake nimed

Teie galeriilehel saab avatari pilt nime. Nimi peaks olema iga kaardi jaoks unikaalne, näiteks põhinedes kasutaja ID-l.

/* galeri-item.css failis */

.card-avatar { view-transition-name: avatar-user-123; }

Profiili detaililehel saab suur päise avatar täpselt sama nime.

/* profile-page.css failis */

.profile-header-avatar { view-transition-name: avatar-user-123; }

2. samm: kohandage animatsiooni

Vaikimisi liigutab ja skaleerib brauser avatari, kuid see teostab ka sisu rist-hajumise. Kui pilt on identne, on see hajumine ebavajalik ja võib põhjustada kerget virvendust. Saame selle keelata.

/* Tärn (*) siin on metamärk mis tahes nimetatud rühma jaoks */

::view-transition-image-pair(*) {

  /* Keela vaikimisi hajumine */

  animation-duration: 0s;

}

Oodake, kui me hajumise keelame, kuidas siis sisu vahetub? Jagatud elementide puhul, kus vana ja uus vaade on identsed, on brauser piisavalt nutikas, et kasutada kogu ülemineku jaoks ainult ühte vaadet. `image-pair` sisaldab sisuliselt ainult ühte pilti, nii et hajumise keelamine lihtsalt paljastab selle optimeerimise. Elementide puhul, kus sisu tegelikult muutub, vajaksite vaikimisi hajumise asemel kohandatud animatsiooni.

Kuvasuhte muutuste käsitlemine

Levinud väljakutse tekib siis, kui üleminev element muudab oma kuvasuhet. Näiteks võib 16:9 maastikupildiga pisipilt nimekirjalehel üle minna 1:1 ruudukujuliseks avatariks detaililehel. Brauseri vaikimisi käitumine on animeerida laiust ja kõrgust iseseisvalt, mis põhjustab pildi kokkusurutud või venitatud väljanägemise ülemineku ajal.

Lahendus on elegantne. Me laseme ::view-transition-group'il tegeleda suuruse ja asukoha muutmisega, kuid kirjutame üle selle sees olevate vana ja uue pildi stiilid.

Eesmärk on panna vana ja uus "ekraanipilt" täitma oma konteinerit ilma moonutusteta. Saame seda teha, seades nende laiuse ja kõrguse 100%-le ja lubades brauseri vaikimisi object-fit omadusel (mis päritakse algsest elemendist) skaleerimist õigesti käsitleda.

::view-transition-old(hero-image),

::view-transition-new(hero-image) {

  /* Väldi moonutusi konteineri täitmisega */

  width: 100%;

  height: 100%;

  

  /* Kirjuta üle vaikimisi rist-hajumine, et efekti selgelt näha */

  animation: none;

}

Selle CSS-iga animeerib `image-pair` sujuvalt oma kuvasuhet ja sees olevad pildid kärbitakse või lisatakse neile mustad ribad (sõltuvalt nende `object-fit` väärtusest) õigesti, just nagu need oleksid tavalises konteineris. Seejärel saate selle parandatud geomeetria peale lisada oma kohandatud animatsioone, näiteks rist-hajumise.

Silumine ja brauseri tugi

Elementide stiliseerimine, mis eksisteerivad vaid sekundi murdosa, võib olla keeruline. Õnneks pakuvad kaasaegsed brauserid selleks suurepäraseid arendaja tööriistu. Chrome'i või Edge'i DevTools'is saate minna "Animations" paneelile ja kui käivitate vaateülemineku, saate selle peatada. Peatatud animatsiooniga saate seejärel kasutada "Elements" paneeli, et uurida kogu `::view-transition` pseudo-elementide puud nagu mis tahes muud DOM-i osa. Näete rakendatavaid stiile ja saate neid isegi reaalajas muuta, et oma animatsioone täiustada.

2023. aasta lõpu seisuga on View Transitions API toetatud Chromiumi-põhistes brauserites (Chrome, Edge, Opera). Rakendused on pooleli Firefoxis ja Safaris. See teeb sellest täiusliku kandidaadi progressiivseks täiustamiseks. Toetatud brauseritega kasutajad saavad meeldiva, täiustatud kogemuse, samas kui teiste brauserite kasutajad saavad standardse, hetkelise navigeerimise. Toetust saate kontrollida CSS-is:

@supports (view-transition: none) {

  /* Kõik view-transition stiilid lähevad siia */

  ::view-transition-old(my-element) { ... }

}

Parimad tavad globaalsele publikule

Animatsioonide rakendamisel on ülioluline arvestada kasutajate ja seadmete mitmekesisusega kogu maailmas.

Jõudlus: Animatsioonid peaksid olema kiired ja sujuvad. Jääge animeerima CSS-i omadusi, mida brauseril on odav töödelda, peamiselt transform ja opacity. Omaduste nagu width, height või margin animeerimine võib igal kaadril käivitada paigutuse ümberarvutusi, mis põhjustab hakkimist ja halva kogemuse, eriti vähem võimsatel seadmetel.

Ligipääsetavus: Mõned kasutajad kogevad liikumisest tingitud iiveldust või ebamugavustunnet animatsioonide tõttu. Kõik suuremad operatsioonisüsteemid pakuvad kasutaja eelistust liikumise vähendamiseks. Peame seda austama. prefers-reduced-motion meediapäring võimaldab teil nende kasutajate jaoks animatsioone keelata või lihtsustada.

@media (prefers-reduced-motion: reduce) {

  ::view-transition-group(*),

  ::view-transition-old(*),

  ::view-transition-new(*) {

    /* Jäta kõik kohandatud animatsioonid vahele ja kasuta kiiret, lihtsat hajumist */

    animation: none !important;

  }

}

Kasutajakogemus (UX): Head üleminekud on eesmärgipärased. Need peaksid suunama kasutaja tähelepanu ja pakkuma konteksti kasutajaliideses toimuva muutuse kohta. Liiga aeglane animatsioon võib muuta rakenduse loiuks, samas kui liiga toretsev võib olla häiriv. Püüdke üleminekute kestuseks seada 200–500 ms. Eesmärk on, et animatsiooni pigem tuntaks kui nähakse.

Kokkuvõte: tulevik on sujuv

CSS View Transitions API ja eriti selle võimas pseudo-elementide puu esindab monumentaalset hüpet edasi veebi kasutajaliideste jaoks. See pakub arendajatele natiivset, jõudsat ja ülimalt kohandatavat tööriistakomplekti, et luua selliseid sujuvaid, olekupõhiseid üleminekuid, mis olid kunagi ainult natiivrakenduste pärusmaa. Mõistes ::view-transition, ::view-transition-group ning vana/uue pildipaari rolle, saate liikuda kaugemale lihtsatest hajumistest ja luua keerukaid, tähendusrikkaid animatsioone, mis parandavad kasutatavust ja rõõmustavad kasutajaid.

Kuna brauserite tugi laieneb, saab sellest API-st kaasaegse esiotsa arendaja tööriistakasti oluline osa. Selle võimekust omaks võttes ning jõudluse ja ligipääsetavuse parimaid tavasid järgides saame ehitada veebi, mis pole mitte ainult funktsionaalsem, vaid ka ilusam ja intuitiivsem kõigile, kõikjal.